<template>
  <div class="mainbody">
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="view-frame">
        <div class="left">
          <div class="top">
            <div class="elec-trend">
              <div class="elec-trend-title">FAB-L20(ARRAY厂)</div>
            </div>
              
            <div class="floor">
              <div class="fl_top">
                <div
                  :class="['cvd', l20 === 'CVD' ? 'active' : '']"
                  @click="changeleft('CVD')"
                >
                  CVD
                </div>
                <div
                  :class="['imp1', l20 === 'IMP1' ? 'active' : '']"
                  @click="changeleft('IMP1')"
                >
                  IMP
                </div>
                <div
                  :class="['dry1', l20 === 'DRY1' ? 'active' : '']"
                  @click="changeleft('DRY1')"
                >
                  DRY
                </div>
                <div
                  :class="['test', l20 === 'TEST' ? 'active' : '']"
                  @click="changeleft('TEST')"
                >
                  TEST
                </div>
                <div
                  :class="['wet', l20 === 'WET' ? 'active' : '']"
                  @click="changeleft('WET')"
                >
                  WET
                </div>
                <div
                  :class="['dry2', l20 === 'DRY2' ? 'active' : '']"
                  @click="changeleft('DRY2')"
                >
                  DRY
                </div>
                <div
                  :class="['imp2', l20 === 'IMP2' ? 'active' : '']"
                  @click="changeleft('IMP2')"
                >
                  IMP
                </div>
              </div>
              <div class="fl_bottom">
                <div
                  :class="['ela1', l20 === 'ELA1' ? 'active' : '']"
                  @click="changeleft('ELA1')"
                >
                  ELA
                </div>
                <div
                  :class="['cvd2', l20 === 'CVD2' ? 'active' : '']"
                  @click="changeleft('CVD2')"
                >
                  CVD
                </div>
                <div
                  :class="['ela2', l20 === 'ELA2' ? 'active' : '']"
                  @click="changeleft('ELA2')"
                >
                  ELA
                </div>
                <div
                  :class="['pvd', l20 === 'PVD' ? 'active' : '']"
                  @click="changeleft('PVD')"
                >
                  PVD
                </div>
                <div
                  :class="['photo', l20 === 'PHOTO' ? 'active' : '']"
                  @click="changeleft('PHOTO')"
                >
                  PHOTO
                </div>
                <div class="dept_group">
                  <div class="dept_top">
                    <div
                      :class="['imp3', l20 === 'IMP3' ? 'active' : '']"
                      @click="changeleft('IMP3')"
                    >
                      IMP
                    </div>
                    <div
                      :class="['dry3', l20 === 'DRY3' ? 'active' : '']"
                      @click="changeleft('DRY3')"
                    >
                      DRY
                    </div>
                  </div>
                  <div class="dept_bottom">
                    <div class="bottom_left">
                      <div
                        :class="['dry4', l20 === 'DRY4' ? 'active' : '']"
                        @click="changeleft('DRY4')"
                      >
                        DRY
                      </div>
                      <div
                        :class="['pvd1', l20 === 'PVD1' ? 'active' : '']"
                        @click="changeleft('PVD1')"
                      >
                        PVD
                      </div>
                    </div>
                    <div
                      :class="['pvd2', l20 === 'PVD2' ? 'active' : '']"
                      @click="changeleft('PVD2')"
                    >
                      PVD
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="bottom">
            <div class="elec-trend">
              <div class="elec-trend-title">FAB-L40</div>
            </div>
            <div class="floor">
              <div
                :class="['array', l20 === 'ARRAY' ? 'active' : '']"
                @click="changebottom('ARRAY')"
              >
                ARRAY厂
                <br />PI区域
              </div>
              <div
                :class="['touch', l20 === 'TOUCH' ? 'active' : '']"
                @click="changebottom('TOUCH')"
              >
                TOUCH厂
              </div>
              <div
                :class="['el', l20 === 'EL' ? 'active' : '']"
                @click="changebottom('EL')"
              >
                EL厂
              </div>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="right1">
            <div class="elec-trend">
              <div class="elec-trend-title">{{ lefttitle2 }}</div>
            </div>
            <div class="dropdown_group">
              <el-select v-model="energyType" @change="changevalue($event, 1)">
                <el-option
                  v-for="(item, index) in energyOption"
                  :key="index"
                  :label="item.label"
                  :value="item.energyType"
                />
              </el-select>

              <el-select v-model="timeZone" @change="changetime()">
                <el-option
                  v-for="(item, index) in timeOption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>

            <div class="linechart">
              <vechart :options="consumption" />
            </div>
          </div>

          <div class="right2">
            <div class="elec-trend">
              <div class="elec-trend-title">能源用量占比</div>
            </div>
            <div class="piechart">
              <vechart :options="Energyvalue" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import linecharts from "./json/linecharts.json";

import piecharts from "./json/piecharts.json";

import { mapState } from "vuex";

export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    vechart: () => import("@components/charts/Vechart.vue"),
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      linecharts: linecharts,
      piecharts: piecharts,
      lefttitle: "CVD",
      energyOption: [
        {
          energyType: "1",
          label: "电",
        },
        {
          energyType: "2",
          label: "水",
        },

        {
          energyType: "3",
          label: "CDA",
        },
      ],
      timeOption: [
        {
          value: "1",
          label: "当年分月",
        },
        {
          value: "2",
          label: "当月分日",
        },
      ],
      //请求参数
      l20: "CVD",
      timeZone: "1",
      energyType: "1",
      //返回数据
      //X时间
      nowTime: [],
      lastValue: [],
      //now柱子
      nowValue: [],
      lefttitle2: "CVD",
      //同比   //同比数组
      nowdatavalue: [],
      lastmonthalue: [],
      datavalue: [],
      //环比数组
      nownamevalue: [],

      ringvalue: [],
      //环比数组
      //能源占比
      Energyshare: [],
      echartstitle: "电",
      echartsname: "(kWh)",
      //月同比
      factoryName: "",
    };
  },
  computed: {
    mainTitle() {
      return this.title;
    },
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
    consumption() {
      if (this.nowTime.length > 15) {
        console.log(this.nowValue, "监听里面");
        return {
          ...this.linecharts,
          xAxis: {
            ...this.linecharts.xAxis,
            data: this.nowTime,
          },
          legend: {
            data: [this.echartstitle, "同比", "环比"],
            icon: "roundRect",
            itemWidth: 15,
            itemHeight: 8,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          series: [
            {
              name: this.echartstitle,
              type: "bar",
              data: this.nowValue,
              lineStyle: {
                color: "#00F4FF",
              },
              yAxisIndex: 0,
              symbol: "none",
              barWidth: "40%",
            },
            {
              name: "同比",
              type: "line",
              data: this.datavalue,
              lineStyle: {
                color: "#5670D1",
              },
              yAxisIndex: 1,
              symbol: "none",
            },
            {
              name: "环比",
              type: "line",
              data: this.ringvalue,
              lineStyle: {
                color: "#D590BD",
              },
              yAxisIndex: 1,
              symbol: "none",
            },
          ],
        };
      } else {
        return {
          ...this.linecharts,
          xAxis: {
            ...this.linecharts.xAxis,
            data: this.nowTime,
          },
          legend: {
            data: [this.echartstitle, "同比", "环比"],
            icon: "roundRect",
            itemWidth: 15,
            itemHeight: 8,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          yAxis: [
            {
              name: "用" + this.echartstitle + "量" + this.echartsname,
              nameTextStyle: {
                fontSize: 12,
                color: "rgba(255,255,255)",
              },
              type: "value",
              axisLabel: {
                color: "#fff",
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.5)",
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
            {
              name: "%",
              nameTextStyle: {
                fontSize: 12,
                color: "rgba(255,255,255)",
              },
              type: "value",
              axisLabel: {
                color: "#fff",
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.3)",
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: this.echartstitle,
              type: "bar",
              data: this.nowValue,
              lineStyle: {
                color: "#00F4FF",
              },
              yAxisIndex: 0,
              symbol: "none",
              barWidth: "40%",
            },
            {
              name: "同比",
              type: "line",
              data: this.datavalue,
              lineStyle: {
                color: "#5670D1",
              },
              yAxisIndex: 1,
              symbol: "none",
            },
            {
              name: "环比",
              type: "line",
              data: this.ringvalue,
              lineStyle: {
                color: "#D590BD",
              },
              yAxisIndex: 1,
              symbol: "none",
            },
          ],
        };
      }
    },
    Energyvalue() {
      // console.log(this.Energyshare, "变化的");
      this.Energyshare.find((item) => {
        // item["depName"] = item.name;
        item.name = item.depName;
        delete item.depName;
      });
      // console.log(this.Energyshare, "变化的222");
      if (this.Energyshare[0] == undefined) {
        return this.piecharts;
      } else {
        return {
          ...this.piecharts,
          series: [
            {
              name: "日" + this.echartstitle + "量" + this.echartsname,
              type: "pie",
              center: ["50%", "50%"],
              radius: ["45%", "65%"],
              label: {
                formatter: "{b}{per|{d}%}",
                rich: {
                  per: {
                    color: "#fff",
                    padding: [2, 4],
                    borderRadius: 2,
                  },
                },
                fontSize: 14,
                color: "#fff",
              },
              labelLine: {
                lineStyle: {
                  color: "#ddd",
                },
              },
              data: this.Energyshare,
            },
          ],
        };
      }
    },
  },
  created() {
    // this.searchEnergy();
    this.queryvalue();
    this.Energy();
  },
  methods: {
    async queryvalue() {
      // console.log("执行");
      var queryDat = new FormData();
      queryDat.append("area", this.lefttitle);
      queryDat.append("struts", this.energyType);
      queryDat.append("time", this.timeZone);
      queryDat.append("factoryName", this.factoryName);

      await this.proposal
        .searchEnergyConsumption(queryDat)
        .then((res) => {
          this.datavalue = [];
          this.ringvalue = [];
          this.nownamevalue = [];
          if (res.data.code == 200) {
            console.log(res.data.data, "元数据组");
            //X时间与大标题
            this.lefttitle2 = res.data.data.title;
            this.nowTime = res.data.data.nowTime;
            //今年nowValue 用量
            this.nowValue = res.data.data.nowValue;
            this.nowdatavalue = res.data.data.nowValue;

            this.nownamevalue = this.nowdatavalue;

            //去年lastValue 用量
            this.lastValue = res.data.data.lastValue;
            this.lastmonthvalue = res.data.data.lastValue;

            //年同比
            for (var i = 0; i < this.nowdatavalue.length; i++) {
              if (this.lastmonthvalue[i] - 0 == 0) {
                this.datavalue.push("0.00");
              } else {
                (this.lastmonthvalue[i] = this.lastmonthvalue[i]).toFixed(2);
                this.datavalue.push(
                  (this.nowdatavalue[i] / this.lastmonthvalue[i]).toFixed(2)
                );
              }
            }

            // console.log(this.datavalue, "月同比");
            //年环比
            // console.log(this.nownamevalue, "原数组");
            if (this.lastmonthvalue[this.lastmonthvalue.length - 1] == 0) {
              this.ringvalue.push("0.00");
            } else {
              this.ringvalue(
                this.nownamevalue[0] /
                  this.lastmonthvalue[this.lastmonthvalue.length - 1]
              );
            }
            for (var i = 0; i < this.nownamevalue.length; i++) {
              if (this.nownamevalue[i] == 0) {
                this.ringvalue.push("0.00");
              } else {
                this.ringvalue.push(
                  (this.nownamevalue[i + 1] / this.nownamevalue[i]).toFixed(2)
                );
              }
            }

            // console.log(this.ringvalue);
          } else {
            this.datavalue = [];
            this.ringvalue = [];
            this.nowValue = ["暂无数据"];
            this.nowTime = ["暂无数据"];
            console.log("操作失败");
            return false;
          }
        })
        .catch(function (error) {
          this.datavalue = [];
          this.ringvalue = [];
          this.nowValue = ["暂无数据"];
          this.nowTime = ["暂无数据"];
          console.log("请求各厂能源监控接口失败");
        });
    },
    truncate(arr) {
      var m = arr.slice(0);
      m.splice(m.length - 1, 1);
      return m;
    },
    async Energy() {
      var queryDat = new FormData();
      queryDat.append("struts", this.energyType);
      await this.proposal
        .searchEnergyConsumptionTwo(queryDat)
        .then((res) => {
          if (res.data.code == 200) {
            this.Energyshare = res.data.data;
            // console.log(this.Energyshare, 5555555555);
          }
        })
        .catch(function (error) {
          console.log("请求能源占比接口失败");
        });
    },
    changeleft(val) {
      this.l20 = val;
      this.lefttitle = val;
      this.factoryName = "";
      this.lefttitle = this.lefttitle.replace(/[0-9]+/, "");
      this.queryvalue();
    },
    changebottom(val) {
      console.log(val, "asads");
      if (val === "ARRAY") {
        this.l20 = val;
        this.factoryName = val;
        this.lefttitle = "PI";
      } else {
        this.l20 = val;
        this.factoryName = val;
        this.lefttitle = "";
      }

      this.queryvalue();
    },
    changevalue(val) {
      if (val == 1) {
        this.echartstitle = "电";
        this.echartsname = "(kWh)";
      } else if (val == 2) {
        this.echartstitle = "水";
        this.echartsname = "(m³)";
      } else if (val == 3) {
        this.echartstitle = "CDA";
        this.echartsname = "(L)";
      }
      // console.log(val, this.echartstitle);
      this.queryvalue();
      this.Energy();
    },
    changetime() {
      // console.log(this.timeZone, "时间选择");
      this.queryvalue();
    },
  },
};
</script>
<style lang="scss" scoped>
.mainbody {
  height: 100vh;
  background: url("~@assets/report/bg.png") no-repeat;
  background-size: 100% 100%;
  .container {
    position: relative;
    width: 92%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    .view-frame {
      display: flex;
      justify-content: space-between;
      height: 89%;
      overflow-y: scroll;
      // 隐藏滚动条
      &::-webkit-scrollbar {
        // 兼容Chrome
        display: none;
      }
      &::-o-scrollbar {
        // 兼容Opera
        display: none;
      }
      scrollbar-width: none; // 兼容Firefox
      -ms-overflow-style: none; // 兼容edge
      .left,
      .right {
        flex-basis: 49%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        .right1 {
          flex-basis: 49%;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          .elec-trend {
            width: 100%;
            display: flex;
            flex-basis: 10%;
            justify-content: space-between;
            border-bottom: 1px solid #aaa;
            margin: 1rem 0;
            .elec-trend-title {
              font-size: 1.5rem;
              font-weight: 600;
              line-height: 3rem;
            }
          }
          .dropdown_group {
            height: 6%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-select > .el-input {
              width: 200px;
              margin-left: 20px;
              border: 1px solid #0af;
              border-radius: 5px;
            }
            /deep/.el-input__inner {
              width: 13rem;
              height: 3.5rem;
              background: transparent;
              border-radius: 0;
              padding-left: 2rem;
              margin-left: 1rem;
              border: none;
              color: #fff;
            }
            // /deep/.el-select-dropdown{
            //   color: #fff!important;
            // }
            /deep/.el-select-dropdown {
              border: 1px solid #0af;
              background: transparent;
            }
            /deep/.el-select-dropdown__list {
              background: transparent;
            }
          }

          .linechart {
            height: 70%;
            width: 100%;
          }
        }
        .right2 {
          flex-basis: 49%;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          .elec-trend {
            width: 100%;
            display: flex;
            flex-basis: 10%;
            justify-content: space-between;
            border-bottom: 1px solid #aaa;
            margin: 1rem 0;
            .elec-trend-title {
              font-size: 1.5rem;
              font-weight: 600;
              line-height: 3rem;
            }
          }
          .piechart {
            flex-basis: 90%;
            width: 100%;
          }
        }
      }
      .left {
        .top,
        .bottom {
          width: 100%;
          height: 49%;
        }
        .top {
          .floor {
            width: 100%;
            height: 90%;
            background: url("~@assets/image/l20.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            .fl_top {
              height: 45%;
              border-bottom: 8px solid rgba(0, 0, 0, 0.5);
              display: flex;
              justify-content: space-around;
              align-items: center;
              div {
                height: 98%;
                border: 5px solid rgba(0, 0, 0, 0.6);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.6rem;
                font-weight: 600;
                color: #fff;
              }
              div.active {
                color: rgb(11, 28, 74);
                background: rgb(0, 244, 255);
                background-clip: content-box;
              }
              .cvd,
              .wet {
                flex-basis: 18%;
              }
              .imp1,
              .dry1 {
                flex-basis: 6%;
              }
              .test {
                flex-basis: 15%;
              }
              .dry2 {
                flex-basis: 20%;
              }
              .imp2 {
                flex-basis: 15%;
              }
            }
            .fl_bottom {
              height: 54.5%;
              display: flex;
              justify-content: space-around;
              align-items: center;
              div {
                height: 99.5%;
                border: 5px solid rgba(0, 0, 0, 0.6);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.6rem;
                font-weight: 600;
                color: #fff;
              }
              div.active {
                color: rgb(11, 28, 74);
                background: rgb(0, 244, 255);
                background-clip: content-box;
              }
              .ela1,
              .cvd2,
              .ela2 {
                flex-basis: 6%;
              }
              .pvd {
                flex-basis: 12%;
              }
              .photo {
                flex-basis: 54%;
              }
              .dept_group {
                flex-basis: 15%;
                border: none;
                display: flex;
                flex-flow: column;
                justify-content: space-around;
                .dept_top {
                  width: 100%;
                  height: 26.5%;
                  display: flex;
                  justify-content: space-around;
                  border: none;
                  .imp3 {
                    flex-basis: 54%;
                    height: 100%;
                  }
                  .dry3 {
                    flex-basis: 44%;
                    height: 100%;
                  }
                }
                .dept_bottom {
                  height: 73%;
                  width: 100%;
                  display: flex;
                  justify-content: space-around;
                  border: none;
                  .bottom_left {
                    height: 100%;
                    flex-basis: 54%;
                    border: none;
                    display: flex;
                    flex-flow: column;
                    justify-content: space-around;
                    .dry4,
                    .pvd1 {
                      width: 100%;
                      height: 50%;
                    }
                  }
                  .pvd2 {
                    height: 97%;
                    flex-basis: 44%;
                  }
                }
              }
            }
          }
        }
        .bottom {
          display: flex;
          flex-flow: column;
          .floor {
            width: 100%;
            height: 90%;
            background: url("~@assets/image/l40.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            div {
              height: 99%;
              border: 5px solid rgba(0, 0, 0, 0.6);
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 1.6rem;
              font-weight: 600;
              color: #fff;
            }
            div.active {
              color: rgb(11, 28, 74);
              background: rgb(0, 244, 255);
              background-clip: content-box;
            }
            .array {
              flex-basis: 15%;
            }
            .touch {
              flex-basis: 40%;
            }
            .el {
              flex-basis: 44%;
            }
          }
        }
      }
      .right {
        .elec-trend {
          height: 4.9%;
        }

        .linechart,
        .piechart {
          // height: 42%;
          // width: 100%;
        }
      }
    }
  }
}
</style>
